<template>
  <div class="app-container">
    <el-container style="height:750px">
      <el-aside class="bz-aside">
        <el-row v-for="biz in bizList">
          <el-row type="flex" @click.native="showBizInfo(biz.bizId)" :class="{'aside-item-select' : selectId == biz.bizId}"  class="aside-item">
            <el-col :span="4" class="aside-item-col"><img src="@/assets/images/running.png" style="width: 80%;"/></el-col>
            <el-col :span="20" class="aside-item-col"><div style="">{{biz.bizName}}</div></el-col>
          </el-row>
        </el-row>
      </el-aside>
      <el-main v-if="selectBizInfo != null">
          <el-row type="flex">
            <el-col :span="3"><div class="block-content block-title">组件名称</div></el-col>
            <el-col :span="9"><div class="block-content">{{ selectBizInfo.bizName }}</div></el-col>
            <el-col :span="3"><div class="block-content block-title">版本号</div></el-col>
            <el-col :span="9"><div class="block-content">{{ selectBizInfo.version }}</div></el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="3"><div class="block-content block-title">组件描述</div></el-col>
            <el-col :span="21"><div class="block-content">{{ selectBizInfo.bizDesc }}</div></el-col>
          </el-row>
      </el-main>
      <el-main v-else>
         <div>无数据</div>
      </el-main>
    </el-container>

    <!-- 添加或修改业务组件对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="组件名称" prop="bizName">
          <el-input v-model="form.bizName" placeholder="请输入组件名称" />
        </el-form-item>
        <el-form-item label="组件版本" prop="version">
          <el-input v-model="form.version" placeholder="请输入组件版本" />
        </el-form-item>
        <el-form-item label="组件描述" prop="bizDesc">
          <el-input v-model="form.bizDesc" placeholder="请输入组件描述" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listBiz, getBiz, delBiz, addBiz, updateBiz } from "@/api/crayon/biz";

export default {
  name: "Biz",
  dicts: ['crayon_biz_status'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 业务组件表格数据
      bizList: [],
      // 选中id
      selectId: 0,
      // 展示组件明细信息
      selectBizInfo:null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        bizName: null,
        version: null,
        bizStatus: null,
        bizDesc: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        bizName: [
          { required: true, message: "组件名称不能为空", trigger: "blur" }
        ],
        version: [
          { required: true, message: "组件版本不能为空", trigger: "blur" }
        ],
        bizStatus: [
          { required: true, message: "组件状态不能为空", trigger: "change" }
        ],
        bizDesc: [
          { required: true, message: "组件描述不能为空", trigger: "blur" }
        ],
      },
      //组件状态
      statusMap: [{img: require('@/assets/images/pay.png')},
                  {img: "@/assets/images/stop.png"}
      ]
    };
  },
  created() {
    //获取数据列表
    this.getList();
  },
  methods: {
    /** 查询业务组件列表 */
    getList() {
      this.loading = true;
      listBiz(this.queryParams).then(response => {
        this.bizList = response.rows;
        this.total = response.total;
        this.loading = false;
          if (this.total > 0) {
            //获取选中组件明细
            this.showBizInfo(this.bizList[0].bizId);
          }
      });
    },
    //查询组件信息
    showBizInfo(bizId) {
      if (this.selectId != bizId) {
        this.selectId = bizId;
        getBiz(this.selectId).then(response => {
          this.selectBizInfo = response.data;
        });
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        bizId: null,
        bizName: null,
        version: null,
        bizStatus: null,
        bizDesc: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.bizId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加业务组件";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const bizId = row.bizId || this.ids
      getBiz(bizId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改业务组件";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.bizId != null) {
            updateBiz(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addBiz(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const bizIds = row.bizId || this.ids;
      this.$modal.confirm('是否确认删除业务组件编号为"' + bizIds + '"的数据项？').then(function() {
        return delBiz(bizIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('crayon/biz/export', {
        ...this.queryParams
      }, `biz_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style scoped lang="scss">
/**侧边栏**/
.bz-aside{
  border: 1px solid rgb(238, 238, 238);
  background-color: rgb(255,255,255);
  padding: 0px 0px
}
.aside-item-select{
  background-color: rgb(236, 245, 255);
}
.aside-item{
  padding: 4px 8px;
  &:hover {
    background-color: rgb(236, 245, 255);
  }
}
.aside-item-col {
  display: flex;
  align-items: center;
}

  /**组件信息**/
.block-title{
  font-weight: bold;
  text-align: center;
}
.block-content {
  border: 1px solid rgb(238,238,238);
  margin:0px -1px -1px 0px;
  padding: 20px 10px;
  height: 100%;
}
</style>
